<template><app-layout>
		<view class="template-order">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>签到记录</tn-nav-bar>

			<view class="list" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="li" v-for="(item,idx) in list" :key="idx"
					@click="tn(`/discoveryPages/sign/detail?id=${item.id}`)">
					<tn-list-cell unlined :arrow="false" :arrowRight="true">
						<view slot="default" class="">
							<view class="mtitle">
								<view class="tname">
									{{item.username}}提交的签到
								</view>
								<view class="ii">
									{{item.tjtime}}
								</view>
							</view>
							
							<view class="ii">
								签到时间：{{item.signtime}}
							</view>
							<view class="ii">
								签到位置：{{item.address}}
							</view>
							<view class="status ii">
								<view class=" tn-color-orange" v-if="item.sfsh==0">待审核</view>
								<view class=" tn-color-green " v-if="item.sfsh==1">审核通过</view>
								<view class=" tn-color-red" v-if="item.sfsh==2">审核退回</view>
							</view>
						</view>
					</tn-list-cell>
				</view>
			</view>

			<!-- <bottom-btn :subtext="'录入'" @save="save" @submit="tnface"></bottom-btn> -->
			<tn-empty  v-if="list.length<1" class="error"  icon="/static/error/common.png" mode="data"></tn-empty>
			<view class='tn-tabbar-height'></view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	import {
		mapGetters,
		mapState
	} from "vuex";
	export default {
		name: 'hairlist',
		mixins: [templatePageMixin],
		// mfid	字符串	可选			在册人员
		// qingjiaks	字符串	必须			请假开始时间
		// qingjiajs	字符串	必须			请假暂停结束时间
		// bjfuser	字符串	必须			种类1 请假外出 2因病住院 3.生病在家 传id
		// qingjiayy	字符串	必须			事由
		// province	字符串	必须			省
		// city	字符串	必须			市
		// county	字符串	必须			区
		// xz	字符串	必须			详址
		// issx	整型	必须			随行人员 1有 0无
		// retinue	字符串	可选			随行人员
		// tel	字符串	可选			随行人员的联系电话
		data() {
			return {
				page: 1,
				mfid: '',
				list: [],
			}
		},
		computed: {
			// ...mapState({
			// 	userinfo: state => state.userinfo,
			// })
		},
		onLoad(options) {
			let t = this;
			this.mfid = options.mfid ? options.mfid : this.mfid;
			if (!this.mfid) {
				uni.showModal({
					title: '提示',
					content: '用户ID不存在，请稍后再试',
					showCancel: false,
					success() {
						t.goBack()
					}
				})
			}
		},
		onShow() {
			this.$user.getInfo()
		},
		onReady() {
			this.getList()
		},
		onReachBottom() {
			this.getList();
		},
		methods: {

			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			add() {

			},


			getList() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.sign.list,
					data: {
						limit_page: this.page,limit_count:20,
						type: this.type,
						mfid: this.mfid
					}
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						if (this.page !== 1) {
							this.list = this.list.concat(response.list);
						} else {
							this.list = response.list;
						}
						this.page = response.list.length ? this.page + 1 : this.page;
					}
				}).catch((msg) => {
					this.$t.message.toast(msg);
					this.$t.message.closeLoading();
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.template-order {}

	.nobody {
		height: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.list {
		// padding: 20rpx;

		.li {
			margin: 2rpx 0;
			border: 1px solid #eee;
			border-radius: 5px;
			
			.mtitle {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.tname {
					font-weight: bold;
				}
			}
			
			.ii{
				color: $uni-text-color-grey;
				font-size: 28rpx ;
			}

			.type {
				padding-right: 40rpx;
			}
		}
	}
</style>